<template>
  <div class="key-value-editor">
    <div class="header">
      <span class="title">{{ title }}</span>
      <el-button type="primary" size="small" :icon="Plus" @click="addPair">
        添加
      </el-button>
    </div>
    
    <div class="pairs-container">
      <div 
        v-for="(pair, index) in pairs" 
        :key="index" 
        class="pair-row"
      >
        <el-input
          v-model="pair.key"
          placeholder="键名"
          size="default"
          @input="updateData"
          class="key-input"
        />
        <el-input
          v-model="pair.value"
          placeholder="值"
          size="default"
          @input="updateData"
          class="value-input"
        />
        <el-button
          type="danger"
          size="small"
          :icon="Delete"
          @click="removePair(index)"
          class="delete-btn"
        />
      </div>
    </div>
    
    <div v-if="pairs.length === 0" class="empty-state">
      <el-text type="info" size="small">暂无数据，点击"添加"按钮创建</el-text>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { Plus, Delete } from '@element-plus/icons-vue'

// Props
const props = defineProps({
  title: {
    type: String,
    default: '键值对'
  },
  modelValue: {
    type: Object,
    default: () => ({})
  },
  keyPlaceholder: {
    type: String,
    default: '键名'
  },
  valuePlaceholder: {
    type: String,
    default: '值'
  }
})

// Emits
const emit = defineEmits(['update:modelValue'])

// Data
const pairs = ref([])

// 初始化数据
const initPairs = () => {
  const obj = props.modelValue || {}
  pairs.value = Object.entries(obj).map(([key, value]) => ({
    key,
    value: String(value)
  }))
  
  // 如果没有数据，添加一个空行
  if (pairs.value.length === 0) {
    pairs.value.push({ key: '', value: '' })
  }
}

// 添加键值对
const addPair = () => {
  pairs.value.push({ key: '', value: '' })
}

// 删除键值对
const removePair = (index) => {
  pairs.value.splice(index, 1)
  updateData()
}

// 更新数据
const updateData = () => {
  const result = {}
  pairs.value.forEach(pair => {
    if (pair.key && pair.key.trim()) {
      result[pair.key.trim()] = pair.value
    }
  })
  emit('update:modelValue', result)
}

// 监听外部数据变化
watch(() => props.modelValue, () => {
  initPairs()
}, { deep: true })

// 组件挂载时初始化
onMounted(() => {
  initPairs()
})
</script>

<style scoped>
.key-value-editor {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 12px;
  background-color: #fafafa;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.title {
  font-weight: 500;
  color: #303133;
}

.pairs-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pair-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.key-input {
  flex: 1;
}

.value-input {
  flex: 2;
}

.delete-btn {
  flex-shrink: 0;
}

.empty-state {
  text-align: center;
  padding: 20px;
  color: #909399;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .pair-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .key-input,
  .value-input {
    flex: none;
  }
}
</style>
